<template>
	<!-- 订单支付 -->
	<view class="Title">订单详情</view>
	<view class="Order Infor">
		<view><text>订单编号：</text><text>{{orderNum}}</text></view>
		<view><text>下单时间：</text><text>{{orderTime}}</text></view>
		<view><text>订单价格：</text><text>￥{{moneyData.allMoney}}</text></view>
		<view><text>收 货 人：</text><text>{{nowHarvest.name}}</text></view>
		<view><text>收货地址：</text><text>{{nowHarvest.area}} {{nowHarvest.place}}</text></view>
	</view>
	<view class="Null"></view>
	<view class="Order Money">
		<view><text>商品总额</text><text>￥{{moneyData.allMoney}}</text></view>
		<view><text>商品优惠</text><text>-￥{{moneyData.discountMoney}}</text></view>
		<view><text>运费</text><text>+￥{{moneyData.transportMoney}}</text></view>
		<view><text>积分抵扣</text><text>-￥{{moneyData.integrationMoney}}</text></view>
	</view>
	<view class="PayMoney">应付金额：<text>￥{{payMoney}}</text></view>
	<view class="Null"></view>
	<view class="Title">积分抵扣</view>
	<view class="JiFen">
		<view>
			<input v-model="integrationNum" type="number" @input="MaxIntegration" />
			<text @click="Deductible">确认抵扣</text>
		</view>
		<text>本次最多可使用积分{{Math.floor(moneyData.allMoney/2)}}，当前账号可用积分为{{vipData.vipIntegration}}</text>
	</view>
	<view class="Null"></view>
	<view class="Title">支付方式</view>
	<radio-group @change="radioChange" class="Pay">
		<label>
			<radio :value="1" checked /><text>微信</text>
		</label>
		<label>
			<radio :value="2" /><text>支付宝</text>
		</label>
	</radio-group>
	<view class="PayButton" @click="Pay">支付</view>
</template>

<script>
	import {
		reactive
	} from 'vue';
	import store from '../../store/index.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import myRequest from '../../utils/myRequest.js';
	export default {
		setup() {
			let data = reactive({
				vipData: {}, //用户数据
				goodsArr: [], //商品数据
				nowHarvest: {}, //地址数据
				orderNum: "",
				orderTime: "",
				moneyData: {
					allMoney: 0,
					discountMoney: 0,
					transportMoney: 10,
					integrationMoney: 0
				},
				payMoney: 0,
				integrationNum: "",
				PayType: "1",
				Deductible: function() {
					if (data.integrationNum != "") {
						const reg = /^\d*$/;
						if (reg.test(data.integrationNum) == true) {
							const max = Math.floor(data.moneyData.allMoney / 2) > data.vipData.vipIntegration ?
								data.vipData.vipIntegration : Math.floor(data.moneyData.allMoney / 2);
							if (Number(data.integrationNum) <= max) {
								data.moneyData.integrationMoney = Number(data.integrationNum);
								data.ComputPayMoney();
								uni.showToast({
									title: '成功',
									icon: 'success',
									duration: 1000
								});
							} else {
								uni.showToast({
									title: '积分不足',
									icon: 'error',
									duration: 1000
								});
							}
						} else {
							uni.showToast({
								title: '格式不正确,请输入整数',
								icon: 'error',
								duration: 1000
							});
						}
					}
				},
				radioChange: function(evt) {
					data.PayType = evt.detail.value;
				},
				Pay: function() {
					let myI = 0;
					for (let i = 0; i < data.goodsArr.length; i++) {
						myRequest({
							url: "/addOrder",
							method: 'POST',
							data: {
								goodsId: data.goodsArr[i].goodsId,
								vipId: data.vipData.vipId,
								num: data.goodsArr[i].sc_num,
								consignee: data.nowHarvest.name,
								shipAddress: data.nowHarvest.area + data.nowHarvest.place,
								phone: data.nowHarvest.phone,
								payMethod: data.PayType,
								time: data.orderTime,
								logisticsInfo: '待发货',
								money: data.goodsArr[i].sc_money,
								orderMoney: data.payMoney,
								goodsXing: data.goodsArr[i].sc_label,
								orderNum: data.orderNum,
								goodsImg: data.goodsArr[i].goodsImg
							}
						}).then((res) => {
							if (res.data.code == 200) {
								myI++;
							}
						})
						if (store.state.cartORgoods == 1) {
							myRequest({
								url: "/sC_del",
								method: 'POST',
								data: {
									id: data.goodsArr[i].sc_id,
								}
							})
						}
					}
					myRequest({
						url: "/editIntegration",
						method: 'POST',
						data: {
							vipId: data.vipData.vipId,
							integration: data.moneyData.integrationMoney,
							integrationAdd: (Number(data.payMoney) - 10) / 10
						}
					})
					uni.navigateTo({
						url: 'PayOK?PayType=' + data.PayType + '&PayMoney=' + data.payMoney + '&add=' +
							Math.floor((Number(data.payMoney) - 10) / 10) + '&use=' + data.moneyData
							.integrationMoney
					});
				},
				// 计算商品总价钱
				ComputeAllMoney: function() {
					data.goodsArr.forEach((item, index) => {
						data.moneyData.allMoney += (item.sc_money * item.sc_num);
					})
				},
				// 计算应付金额
				ComputPayMoney: function() {
					data.payMoney = data.moneyData.allMoney - data.moneyData.discountMoney + data.moneyData
						.transportMoney - data.moneyData.integrationMoney;
				}
			});
			onLoad(function() {
				data.vipData = store.state.userdata[0];
				data.goodsArr = store.state.orderPayGoods;
				data.nowHarvest = store.state.nowUserOrderHarvest;
				data.ComputeAllMoney();
				data.ComputPayMoney();
				data.orderNum = new Date().getTime();
				data.orderTime = new Date().toLocaleString('chinese', {
					hour12: false
				});
			})
			return data;
		}
	}
</script>

<style>
	.Title {
		padding: 24rpx 36rpx;
		font-size: 28rpx;
		color: #999999;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.Null {
		height: 16rpx;
		background-color: #F5F5F5
	}

	.Order {
		padding-bottom: 60rpx;
		font-size: 30rpx;
	}

	.Order>view {
		display: flex;
		padding: 24rpx 36rpx 0 36rpx;
	}

	.Infor>view>text:first-child {
		width: 200rpx;
	}

	.Infor>view>text:last-child {
		width: 478rpx;
		color: #999999;
	}

	.Money>view {
		justify-content: space-between;
	}

	.Money>view>text:last-child {
		color: #999999;
	}

	.PayMoney {
		padding: 24rpx 36rpx;
		text-align: right;
		border-top: 1rpx solid #F5F5F5;
	}

	.PayMoney>text {
		font-size: 36rpx;
		color: #FF0000;
	}

	.JiFen {
		padding: 24rpx 36rpx;
		font-size: 28rpx;
	}

	.JiFen>view {
		display: flex;
	}

	.JiFen>view>input {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		border: 1rpx solid #999999;
		border-radius: 20rpx;
	}

	.JiFen>view>text {
		height: 60rpx;
		margin-left: 20rpx;
		padding: 0 30rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}

	.Pay {
		display: flex;
		flex-direction: column;
		padding-bottom: 204rpx;
	}

	.Pay>label {
		padding: 24rpx 36rpx 0 36rpx;
	}

	.PayButton {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}
</style>
